<template>
  <view>
    <!-- 筛选 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 商品列表 -->
    <!-- 滚动到底部的事件 小程序提供的 scrolltolower-->
    <scroll-view class="goods" scroll-y @scrolltolower="getMore">
      <view class="item" v-for="item in goodsList" :key="item.goods_id" @click="goDetail(item.goods_id)">
        <!-- 商品图片 -->
        <image class="pic" :src="item.goods_small_logo"></image>
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{ item.goods_name }}</view>
          <view class="price">
            <text>￥</text>
            {{ item.goods_price }}
            <text>.00</text>
          </view>
        </view>
      </view>
      <!-- 没有数据提示信息 -->
      <view class="tips" v-if="goodsList.length === 0">空空如也...</view>
    </scroll-view>
  </view>
</template>

<script>
// 1. 获取传递参数
// 2. 调用接口获取数据
// 3. 渲染数据
import { debounce } from 'lodash';
export default {
  data() {
    return {
      query: '',
      goodsList: [],
      pagenum: 1,
      noMore: false
    };
  },
  onLoad({ query }) {
    this.query = query;
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      if (!this.query) return;
      if (this.noMore) return uni.$showToast('已经没有更多了');
      const { data: res } = await uni.$http.get('/api/public/v1/goods/search', {
        query: this.query,
        pagenum: this.pagenum++,
        pagesize: 5
      });
      // 校验数据
      if (res.meta.status !== 200) return uni.$showToast();

      // 更新数据，重新渲染
      this.goodsList = this.goodsList.concat(res.message.goods);
      this.noMore = this.goodsList.length >= res.message.total;
    },
    getMore: debounce(function () {
      console.log('到底了');
      this.getGoodsList();
    }, 500),
    goDetail(goods_id) {
      uni.navigateTo({
        url: `/subpkg/pages/goods/index?id=${goods_id}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
